<template>
  <view class="videoCard" :style="{ maxWidth: maxWidth }">
    <image
      v-if="!isLoadVideo"
      class="videoCard-imgCover"
      :style="{ maxWidth: maxWidth }"
      mode="aspectFill"
      :src="videoPosterUrl"
    ></image>

    <view
      v-if="!isLoadVideo"
      class="videoCard-imgCoverMask"
      @tap="videoPlayBtnClick"
    ></view>
    <image
      v-if="!isLoadVideo"
      class="videoCard-playBtn"
      src="@/pagesA/static/images/chat/video_play.png"
      @tap="videoPlayBtnClick"
    ></image>
    <video
      v-if="isLoadVideo"
      id="myVideo"
      ref="myVideo"
      class="videoCard-video"
      :style="{ maxWidth: maxWidth }"
      :src="videoUrl"
      :poster="videoPosterUrl"
      objectFit="contain"
      :show-play-btn="true"
      :autoplay="true"
      @play="onPlay"
      @fullscreenchange="fullscreenchange"
    ></video>
    <ConversationStatus
      class="conversationStatus"
      v-if="
        data.from === KKConversationFrom.me &&
        (data.status === KKConversationStatus.fail ||
          data.status === KKConversationStatus.retry)
      "
      :data="data"
      @sendFail="sendFail"
      @reSendMsg="reSendMsg"
    />
  </view>
</template>
<!-- https://file.zhikejiaoyu.com/static/images/video13.mp4 -->
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
import { getFileUrl } from "@/utils/util";
import { KKConversationFrom, KKConversationStatus } from "./conversitonEnum";
import ConversationStatus from "@/pagesA/answer/components/conversationStatus.vue";
import { computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  maxWidth: {
    type: String,
    default: "",
  },
});

const videoPosterUrl = computed(() => {
  if (props.data.tempPoster) {
    return props.data.tempPoster;
  }
  if (props.data.videoPoster) {
    return getFileUrl(props.data.videoPoster) || "";
  }
  return "";
});

const videoUrl = computed(() => {
  if (props.data.tempFilePath) {
    return props.data.tempFilePath;
  }
  return getFileUrl(props.data.text) || "";
});

const isLoadVideo = ref(false);

const videoPlayBtnClick = () => {
  isLoadVideo.value = true;
};

const onPlay = () => {
  videoContext.value.requestFullScreen();
};

const fullscreenchange = (e: any) => {
  if (!e.detail.fullScreen) {
    videoContext.value.pause();
  }
};

const videoContext = ref();
const myVideo = ref();
onMounted(() => {
  videoContext.value = uni.createVideoContext("myVideo", getCurrentInstance());
});

const sendFail = () => {
  emit("sendFail", props.data);
};

// 重新发送消息
const reSendMsg = () => {
  emit("reSendMsg", props.data);
};

const emit = defineEmits(["reSendMsg", "sendFail"]);
</script>

<style lang="scss" scoped>
.videoCard {
  border-radius: 8rpx;
  position: relative;

  &-video {
    max-width: 478rpx;
    border-radius: 8rpx;
  }
  &-imgCover {
    margin-left: auto;
    margin-right: 0px;
    border-radius: 8rpx;
  }
  &-imgCoverMask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8rpx;
  }
  &-playBtn {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    top: calc(50% - 24rpx);
    bottom: calc(50% - 24rpx);
    left: calc(50% - 24rpx);
    right: calc(50% - 24rpx);
  }
  .conversationStatus {
    margin-top: 24rpx;
  }
}
</style>
